<template>
    <view>
        <view class="navBar" :style="AllHeight">
            <view class="navContent" :style="barHeight">
                <view class="navCon" :class="{ Border: !scroll }">
                    <view class="flex-1 flexac height" @click.stop="toBackHome">
                        <text class="iconfont icon-shouye size36 black" v-if="fromShare == 1"></text>
                        <text class="iconfont icon-fanhui size32 black" v-else></text>
                    </view>
                    <view class="flex-1 flexac height p-re" @click="toOrderList">
                        <text class="iconfont icon-order size42 black"></text>
                        <view class="Tip" v-if="show_num > 0">{{ show_num }}</view>
                    </view>
                </view>
            </view>
        </view>
        <Dswiper :goods_photo="pageData.goods_photo"></Dswiper>

        <view class="Info">
            <text class="goods_name">{{ pageData.goods_name }}</text>
            <view class="share">
                <button class="Share_but" open-type="share"></button>
                <view class="share_Btn">
                    <text class="iconfont icon-fenxiang size26 white"></text>
                </view>
                <text class="share_txt">分享</text>
            </view>
        </view>

        <Dinfodata :infoData="pageData"></Dinfodata>
        <Devaluate :goods_id="goods_id"></Devaluate>
        <Dstore :pageData="pageData"></Dstore>

        <view class="uparse">
            <u-parse :content="pageData.goods_content" :domain="imgUrl" :scrollTable="true" :selectable="true" :useAnchor="true"></u-parse>
        </view>

        <view class="footer">
            <view class="Box">
                <view class="Menbox">
                    <view class="list" @click="toOrderList">
                        <view class="iconfont icon-order black size48"></view>
                        <text class="color_66 size20 m-top6">订单</text>
                        <view class="Tip" v-if="show_num > 0">{{ show_num }}</view>
                    </view>
                    <view class="list">
                        <view class="iconfont icon-server black size48"></view>
                        <text class="color_66 size20 m-top6">客服</text>
                        <button class="Share_but" open-type="contact"></button>
                    </view>
                    <view class="list" @click.stop="goodsCollect">
                        <view class="iconfont size48" :class="pageData.goods_collect ? 'icon-Star color_28' : 'icon-a-lujing2190 black'"></view>
                        <text class="color_66 size20 m-top6">收藏</text>
                    </view>
                </view>
                <view class="Make" @click="MakeBtn">立即预约</view>
            </view>
        </view>
        <showModel @cancelFunc="showModal = false" goHome="0" v-if="showModal" type="2"></showModel>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    import Api from '@/common/Api.js';
    import Dswiper from '@/zunyi/components/Dswiper.vue';
    import Dinfodata from '@/zunyi/components/Dinfodata.vue';
    import Devaluate from '@/zunyi/components/Devaluate.vue';
    import Dstore from '@/zunyi/components/Dstore.vue';
    export default {
        components: {
            Dswiper,
            Dinfodata,
            Devaluate,
            Dstore
        },
        data() {
            return {
                showModal: false,
                scroll: true,
                fromShare: 0,
                show_num: 0,
                imgUrl: this.imgUrl,
                goods_id: '',
                pageData: ''
            };
        },
        onLoad(opt) {
            if (opt.goods_id) this.goods_id = opt.goods_id;
        },
        async onShow() {
            const result = await Api.singleDetails(this.goods_id);
            this.pageData = result;
            const orderCount = await Api.getListCount();
            this.show_num = orderCount.show_num;
        },
        methods: {
            MakeBtn() {
                if (!this.vid) return (this.showModal = true);
                this.toUrl(`Make?goods_id=${this.goods_id}`);
            },
            toBackHome() {
                this.fromShare == 1 ? this.backHome() : this.$back();
            },
            async goodsCollect() {
                if (!this.vid) return (this.showModal = true);
                const Result = await Api.goodsCollect(this.goods_id);
                if (!Result) return;
                console.log(Result, 'Result');
                this.pageData.goods_collect = this.pageData.goods_collect ? 0 : 1;
            },
            toOrderList() {
                if (!this.vid) return (this.showModal = true);
                this.toUrl(`orderList`);
            }
        },
        computed: {
            ...mapState(['vid', 'totalHeight', 'navHeight']),
            AllHeight() {
                if (this.scroll) {
                    return ['height:' + this.totalHeight + 'px', ' background-color:' + 'transparent'].join(';');
                } else {
                    return ['height:' + this.totalHeight + 'px', ' background-color:' + '#fff'].join(';');
                }
            },
            barHeight() {
                return ['height:' + this.navHeight + 'px'].join(';');
            },
            TipStyle() {
                if (this.show_num > 99) {
                    return ['width:' + '40rpx', 'height:' + '40rpx'].join(';');
                }
            }
        },
        onPageScroll(event) {
            event.scrollTop >= 340 ? (this.scroll = false) : (this.scroll = true);
        },
        onShareAppMessage(res) {
            if (res.from === 'button') {
                // 来自页面内分享按钮
                console.log(res.target);
            }
            return {
                title: this.pageData.share.title,
                desc: this.pageData.share.desc,
                path: `/pages/index/index?share_v_id=${this.vid}&pageType=101&gid=${this.goods_id}`,
                imageUrl: this.$imgUrls(this.pageData.share.imageUrl)
            };
        },
        onShareTimeline() {
            return {
                title: this.pageData.share.title,
                desc: this.pageData.share.desc,
                query: `share_v_id=${this.vid}&goods_id=${this.goods_id}&bid=${this.bid}&fromShare=1`,
                imageUrl: this.$imgUrls(this.pageData.share.imageUrl)
            };
        }
    };
</script>

<style lang="scss">
    page {
        background-color: $bgF8;
        padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
    }
</style>
<style lang="scss" scoped>
    .navBar {
        width: 100%;
        background-color: transparent;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2000;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        box-sizing: border-box;
        .navContent {
            width: 100%;
            display: flex;
            align-items: center;
            padding-left: 32rpx;
            .navCon {
                width: 180rpx;
                height: 90%;
                background-color: #fff;
                border: 1px solid #fff;
                border-radius: 60rpx;
                display: flex;
                align-items: center;
                position: relative;
                .navli {
                    height: 100%;
                }
                .icon-back {
                    font-size: 30rpx;
                }
                .Tip {
                    min-width: 30rpx;
                    min-height: 30rpx;
                    background-color: #ff3355;
                    border-radius: 50%;
                    position: absolute;
                    top: 0rpx;
                    right: 14rpx;
                    z-index: 10;
                    color: #fff;
                    font-size: 20rpx;
                    display: inline-flex;
                    justify-content: center;
                    align-items: center;
                    aspect-ratio: 1 / 1;
                    text-align: center; /* 文本居中 */
                    white-space: nowrap;
                    padding: 4rpx;
                }
            }
            .navCon:after {
                content: '';
                width: 1px;
                height: 50%;
                background-color: #eaeaea;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
            .Border {
                border: 1px solid #eaeaea;
            }
        }
    }
    .Info {
        width: 100%;
        padding: 32rpx;
        background-color: #fff;
        display: flex;
        align-items: center;
        position: relative;
        z-index: 100;
        margin-top: -50rpx;
        border-radius: 32rpx 32rpx 0rpx 0rpx;
        .goods_name {
            flex: 1;
            padding-right: 36rpx;
            color: #000;
            font-size: 32rpx;
            font-weight: 500;
        }
        .share {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            .share_Btn {
                width: 60rpx;
                height: 60rpx;
                background: $color_28;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .share_txt {
                color: #666;
                font-size: 20rpx;
                padding-top: 10rpx;
            }
        }
    }
    .uparse {
        background-color: #fff;
        margin-top: 24rpx;
    }

    .footer {
        width: 100%;
        background-color: #fff;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 100;
        padding-bottom: env(safe-area-inset-bottom);
        // border-top: 1px solid #eaeaea;
        .Box {
            width: 100%;
            height: 124rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .Menbox {
                height: 100%;
                display: flex;
                align-items: center;
                padding-left: 10rpx;
                .list {
                    width: 94rpx;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    position: relative;
                    .Tip {
                        min-width: 30rpx;
                        min-height: 30rpx;
                        background-color: #ff3355;
                        border-radius: 50%;
                        position: absolute;
                        top: 14rpx;
                        right: 14rpx;
                        z-index: 10;
                        color: #fff;
                        font-size: 20rpx;
                        display: inline-flex;
                        justify-content: center;
                        align-items: center;
                        aspect-ratio: 1 / 1;
                        text-align: center; /* 文本居中 */
                        white-space: nowrap;
                        padding: 4rpx;
                    }
                }
            }
            .Make {
                width: 400rpx;
                height: 96rpx;
                background: #ff3355;
                border-radius: 60rpx;
                margin-right: 20rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #fff;
                font-size: 32rpx;
            }
        }
    }
    .Share_but {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute;
        z-index: 10;
        border: none;
        background-color: transparent;
    }
</style>
